% # variables:
% # bookshelf, sidebar
<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <title>LoNote Configure</title>
        <meta name="description" content="Configure LoNote" />

        <script src="/static/js/jquery-1.9.1.js"></script>
        <script src="/static/js/jquery-ui-1.10.1.custom.min.js"></script>
        <script src="/static/js/URI.js"></script>
        <script src="/static/js/shortcut.js"></script>
        <script src="/static/js/lonote.js"></script>

        <link rel="stylesheet" href="/static/css/jquery-ui/pepper-grinder/jquery-ui.css" />
        <link rel="stylesheet" href="/static/css/default.css" type="text/css" />
        <link rel="stylesheet" href="/static/css/config.css" type="text/css" />

        <script>
        function setCookie(c_name,value,expiredays) {
            var exdate=new Date()
            exdate.setDate(exdate.getDate()+expiredays)
            document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
        }
        function getCookie(c_name) {
            if (document.cookie.length>0) {
                c_start=document.cookie.indexOf(c_name + "=")
                if (c_start!=-1) { 
                    c_start=c_start + c_name.length+1 
                    c_end=document.cookie.indexOf(";",c_start)
                    if (c_end==-1) c_end=document.cookie.length
                    return unescape(document.cookie.substring(c_start,c_end))
                } 
            }
            return ""
        }
        </script>

    </head>

    <body>
        <article id="config_content">
            <h1>Management of LoNote Server</h1>
            <h2>Notebooks Management</h2>
            <form method="POST" action="?cmd=reload">
                % load_status = bookshelf.load_status()
                % load = load_status['load']
                % indir = load_status['indir']
                % fname2buuid = load_status['fname2buuid']
                <ol>
                % for fname in indir:
                    % if fname in load:
                        <li><input name="fname" checked="true" value="{{fname}}" type="checkbox"><a href="/config/book/{{fname2buuid[fname]}}">{{fname.rstrip('.lobook')}}</a></input></li>
                    % else:
                        <li><input name="fname" value="{{fname}}" type="checkbox">{{fname.rstrip('.lobook')}}</input></li>
                    % end
                % end
                </ol>

                % if len(indir) == 0:
                    <p class="description"><b>Nothing can be loaded yet...</b><br/><small> Please create a new book first!</small></p>
                    <input value="Reload" type="submit" disabled="disabled" />
                % else:
                    <input value="Reload" type="submit" />
                % end
            </form>
            <p class="description">Select the books you want to use, then click <b>Reload Button</b>.</p>
            <p>&nbsp;</p>


            <h3>A New Notebook</h3>
            <p class="description">Create a fully new notebook.</p>
            <form method="POST" action="?cmd=createbook">
                <input name="fname" placeholder="Input New book name" type="text" pattern='[^/\\:*?"<>|]{1,240}' title="Please try a valid filename!" required="required" />
                <input value="Add Book" type="submit" />
            </form>
            <p><br/></p>

            <h3>Upload a Notebook</h3>
            <p class="description">Upload a "lobook" you have.</p>
            <!-- <p class="description">If the file not be accepted, just nothing happen.</p> -->
            <form method="POST" enctype="multipart/form-data" action="?cmd=uploadbook">
                <input name="uploadfile" required="required" type="file" />
                <input value="Upload a Book" type="submit" />
            </form>
            <p><br/></p>

            <h2>Browser Management</h2>
            <p class="description">Delete all your browser side data.</p><p class="description">It will reset all <b>"page scroll"</b>, <b>"caret position"</b>, <b>"embedded resource format your used before"</b>, <b>"last page"</b>. etc.</p>
            <input type="submit" value="Clear Browser Side Data" onclick="var ans = confirm('Really delete all browser side data?');if(ans){localStorage.clear();location.reload();}"/>
            <p><br/></p>

            <h3>Sidebar Configure</h3>
            <p class="description">A big "nav maximum level" setting will consume a lot of performance. So make it as small as possible.</p>
            <p><label for="eznav_level" title="The depth of the EZ navigation menu.">Ez-nav level: </label><input id="eznav_level" type="number" min="-1" max="100" step="1" onload="" onchange="setCookie('eznav_level', this.value, 365);" title="must a positive integer or 0 or -1, recommend: 2" /></p>
            <p><label for="stnav_level" title="The depth of the STANDARD navigation menu.">St-nav level: </label><input id="stnav_level" type="number" min="-1" max="100" step="1" onload="" onchange="setCookie('stnav_level', this.value, 365);" title="must a positive integer or 0 or -1, recommend: 0" /></p>
            <script>
                $(window).on('load', function(){
                    var eznav_level = getCookie('eznav_level');
                    $('#eznav_level').val(eznav_level);
                    var stnav_level = getCookie('stnav_level');
                    $('#stnav_level').val(stnav_level);
                });
            </script>
            <p><br/></p>

            <h3>Editing</h3>
            <p class="description">About content editing...</p>
            <p><label for="date_insert_format">Date-stamp <a href="http://hacks.bluesmoon.info/strftime/demo.html" target="_blank">format</a>: </label><input id="date_insert_format" title="This is the date-stamp format which your can insert to your note content, ex: %Y-%m-%d" placeholder="ex: %Y-%m-%d" onkeyup="localStorage['date_insert_format'] = this.value;"/></p>
            <p><label for="time_insert_format">Time-stamp <a href="http://hacks.bluesmoon.info/strftime/demo.html" target="_blank">format</a>: </label><input id="time_insert_format" title="This is the time-stamp format which your can insert to your note content, ex: %H:%M:%S" placeholder="ex: %H:%M:%S" onkeyup="localStorage['time_insert_format'] = this.value;"/></p>
            <script>
                $(window).on('load', function(){
                    var tif = lo.get.time_insert_format();
                    $('#time_insert_format').val(tif);
                    var dif = lo.get.date_insert_format();
                    $('#date_insert_format').val(dif);
                });
            </script>
            <p><br/></p>

            <h3>History Recording</h3>
            <p class="description">Configure Lonote's history recording system.</p>
            <p><label for="rc_days">Auto record for no changed after: </label><input id="rc_days" type="number" min="0" step="1" title="When a page long term have no be changed, auto make a record for backup the old version. (0 for Disable this function)" placeholder="ex: 30" onchange="setCookie('rc_longterm_nochanged', this.value, 365);"/> days.</p>
            <script>
                $(window).on('load', function(){
                    var rc_days = getCookie('rc_longterm_nochanged');
                    $('#rc_days').val(rc_days);
                });
            </script>
            <p><br/></p>


            <h2>Shutdown Server</h2>
            <p class="description">Be careful! You can <b>NOT</b> reopen server by browser.</p>
            <form method="POST" action="?cmd=shutdown">
                <input value="Shutdown" type="submit" onclick="return confirm('Are you sure you want to Shutdown this LoNote server?');" />
            </form>
            <p><br/></p>


        </article>
        
        <script>
            $(window).on('load', lo.scr.restore);
            $(window).on('beforeunload', lo.scr.save);
            $(window).blur(lo.scr.save);
        </script>

        <!-- 讀入 sidebar -->
        {{!sidebar}}
        <!--
        <script>
            function sidebar_load(){
                function get_success(data){
                    $('body').append(data);
                };
                var sidebar_loc = '/sidebar';
                $.get(sidebar_loc, get_success);
            };
            $(window).one('load', sidebar_load);
        </script>
        -->

    </body>
</html>

